<template>
  <BoxContainer>
    <div slot="content">
      <div class="main-article-list_card bgWhite" v-for="(item, index) in articleData.rows" :key="index">
        <div class="content">
          <div class="img-box" v-lazy:background-image="item.cimg" :alt="item.ctitle">
          </div>
          <div class="content-box">
            <h3 class="Line2">
              <nuxt-link :to="'/essay/' + item.cid" tag="a">{{
                item.ctitle
              }}</nuxt-link>
            </h3>
            <span class="content-box_detail Line3">{{ item.cPreface }}</span>
            <div class="content-box_footer">
              {{ getDate(item.createdAt) }} ·
              <span class="tag"><i class="iconfont icon-huati"></i>{{ item.type ? item.type.typename : "其它" }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <ILPagination :total="articleData.count" :current-page="1" @onChange="haChange" />
    </div>
  </BoxContainer>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import { getErrorStatus } from "../../api/test";
import config from "../../utils/config";
import { formatDate } from "../../utils/util.js";
@Component({
  head() {
    return {
      title: "首页",
      // titleTemplate: "%s - 刘洋博客-前端开发-个人博客",
    };
  },
  async asyncData({ app }) {
    // console.log(config.BASE_URL);
    const res = await app.$axios.$get(config.BASE_URL + "/api/article/list");
    debugger
    return {
      articleData: res.d,
    };
  },
})
export default class extends Vue {
  articleData: object = {};
  page: number = 0;

  created() {}
  async getLIst() {
    const res = await this.$axios.$get(
      config.BASE_URL + "/api/article/list?page=" + this.page + "&pages=10"
    );
    this.articleData = res.d;
  }
  getDate(str: string) {
    console.log(str);
    console.log(formatDate(str));
    return formatDate(str);
  }
  haChange(num: number) {
    // console.log(num);
    this.page = num;
    this.getLIst();
    (<HTMLElement>document.documentElement)!.scrollTop = 0;
  }
}
</script>
<style lang="scss" scoped>
.main {
  &-banner {
    height: 280px;
    margin-bottom: 10px;
    background-image: url(https://qn.itliuyang.com/bannerG.jpg);
    background-size: cover;
    background-position: center;
  }

  &-article-list {
    &_card {
      padding: 20px;
      margin-top: 10px;
      max-height: 200px;
      box-sizing: border-box;
      transition: all 0.3s;
      content-visibility: auto;
      &:hover {
        box-shadow: 0px 1px 7px -1px #ccc;
      }
      &:first-child {
        margin-top: 0;
      }

      .tag {
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        display: inline-block;
        position: relative;
        padding-left: 24px;
        background: rgba(51, 153, 204, 0.17);
        color: #3399cc;
        .iconfont {
          position: absolute;
          font-size: 16px;
          top: 50%;
          transform: translate3d(0, -50%, 0);
          left: 5px;
        }
      }

      h3 {
        margin: 0;
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
        color: #454545;
        max-width: 600px;
      }
      .content {
        display: flex;
        .img-box {
          width: 260px;
          height: 140px;
          border-radius: 10px;
          overflow: hidden;
          background-size: cover;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        &-box {
          flex: 1;
          margin-left: 10px;
          position: relative;
          &_footer {
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }

  .slider {
    min-width: 280px !important;
    width: 280px !important;
  }
  .slider-left {
    margin-right: 10px;
  }
  .slider-right {
    margin-left: 10px;
  }
}
</style>